<!-- Dom模板 -->
<template>
  <div class="myMoney">
    <div class="top">
      <div>
        <i class="iconfont" @click="btnMoney()">&#xe641;</i>
      </div>
      <div class="num">
        <h3>我的零钱</h3>
      </div>
      <div class="iconList">
        <i class="iconfont">&#xe6d3;</i> | <i class="iconfont">&#xe501;</i>
      </div>
    </div>
    <div class="content">
      <div>
        <img src="../../../static/img/11.png" alt="" />
      </div>
      <h2><i>￥</i> 9000.00元</h2>
      <p>当前钱包金额提现将在三天内进行打款</p>
      <div class="btnlist">
        <button class="little_money">零钱充值</button>
        <button>现金提现</button>
      </div>
    </div>
    <div class="money_footer">
      <h4>零钱明细</h4>
      <div class="footer_content">
        <h4>10月份</h4>
        <div class="footer_center">
          <div class="left">
            <p>大盘鸡餐饮店</p>
            <span>鸡蛋+面包+牛奶</span>
          </div>
          <div class="right">
              <p>2020/06/19</p>
              <span> <i>+</i> 5</span>
          </div>
        </div>
      </div>
       <div class="footer_content">
        <h4>10月份</h4>
        <div class="footer_center">
          <div class="left">
            <p>大盘鸡餐饮店</p>
            <span>鸡蛋+面包+牛奶</span>
          </div>
          <div class="right">
              <p>2020/06/19</p>
              <span> <i>+</i> 5</span>
          </div>
        </div>
      </div>
       <div class="footer_content">
        <h4>10月份</h4>
        <div class="footer_center">
          <div class="left">
            <p>大盘鸡餐饮店</p>
            <span>鸡蛋+面包+牛奶</span>
          </div>
          <div class="right">
              <p>2020/06/19</p>
              <span> <i>+</i> 5</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    btnMoney(){
      this.$router.push('/my')
    }
  },
};
</script>

<style scoped>
@import url("../../assets/fonts1/iconfont.css");
/* @import url("../../assets/fonts/iconfont.css"); */

.myMoney {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 0 10px;
  overflow: auto;
}
.top {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  /* background: #ccc; */
  display: flex;
  justify-content: space-between;
}
.iconList {
  width: 100px;
  height: 30px;
  background: grey;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  text-align: center;
}
h3 {
  margin-left: 60px;
}
.content {
  width: 100%;
  margin-top: 40px;
  text-align: center;
}
h2 {
  margin-top: 15px;
}
i {
  font-size: 16px;
  font-style: normal;
  color: #ccc;
}
p {
  font-size: 14px;
  margin-top: 10px;
  color: #ccc;
}
.btnlist {
  margin-top: 50px;
}
.little_money {
  background: blue;
  color: white;
}
button {
  width: 300px;
  height: 50px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  outline: none;
  margin-top: 15px;
  background: #ccc;
  font-weight: 600;
}
.money_footer{
    width: 100%;
    margin-top: 40px;
}
.footer_content h4{
    margin-top: 10px;
    border-bottom: 1px solid skyblue;
}
.footer_center{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footer_center .left p{
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 5px;
     color: black;
}
.footer_center .left span{
     color: black;
}
.footer_center .right span{
    font-size: 35px;
    color: red;
}
.footer_center .right span i{
    color: black;
}
</style>